<template>
	<view :class="classes" @click="payAudio" :style="{ width: getWidth }">
		<image class="icon" src="../../../static/img/chat/audio.png"></image>
		<text class="duration">{{ data.extend.duration }}</text>
	</view>
</template>

<script>
const innerAudioContext = uni.createInnerAudioContext(); //音频
const BackgroundAudio = uni.getBackgroundAudioManager();//ios 通过背景音乐播放
export default {
	props: {
		data: {
			type: Object,
			default: () => { }
		},
		right: Boolean
	},
	computed: {
		classes() {
			return `chat-sound-wrap ${this.data.right ? 'chat-sound-right-wrap' : ''}`
		},
		getWidth() {
			let basel = 130
			if (this.data.extend.duration > 9) {
				basel += this.data.extend.duration
				return basel + 'rpx'
			}
		}
	},
	methods: {
		payAudio() {
			const systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'ios') {
				BackgroundAudio.title = "录音文件";
				BackgroundAudio.src = this.data.content
				this.$nextTick(function () {
					console.log("播放语音ios", this.data.content)
					BackgroundAudio.play();
				});
			} else {
				innerAudioContext.src = this.data.content
				this.$nextTick(function () {
					console.log("播放语音", this.data.content)
					innerAudioContext.play();
				});
			}
		},
	}
}
</script>

<style lang="scss">
.chat-sound-wrap {
	height: 80upx;
	background-color: white;
	min-width: 130upx;
	max-width: 70vw;
	border-radius: 16upx;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
	display: flex;

	.duration {
		font-size: 28upx;
		margin-left: 12upx;
	}

	.icon {
		width: 36upx;
		height: 36upx;
		margin-left: 20upx;
	}

	&.chat-sound-right-wrap {
		// background-color: #1E89FF;

		.icon {
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
			transform: rotate(-180deg);
		}
	}
}
</style>
